<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-11-29 10:57:44
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2023-11-30 17:08:29
 * @FilePath: \partal\src\views\design\standard.vue
 * @Description: 设计指南-设计原则
-->
<script lang="ts" setup>
  import { designPng } from '@/enum/imageEnum'
</script>

<template>
  <div class="standard">
    <p class="p14">SSC+ Design</p>
    <p class="p36 mt18">设计原则</p>
    <p class="p14 mt12">设计原则是构建设计系统的具体实施指南。</p>
    <p class="split mt38" />
    <div class="content-item mt46">
      <p class="content-item-title">及时反馈</p>
      <p class="content-item-desc">系统应该让用户知道目前的状态, 并及时给予相对应的反馈。</p>
      <div class="content-item-img">
        <img :src="designPng.standard.feedback1" />
        <img :src="designPng.standard.feedback2" />
      </div>
    </div>
    <div class="content-item mt46">
      <p class="content-item-title">贴近现实</p>
      <p class="content-item-desc">系统应该用用户的语言，用词，短语和用户熟悉的概念，而不是系统术语。遵循现实世界的惯例，让信息符合自然思考逻辑。</p>
      <div class="content-item-img">
        <img :src="designPng.standard.reality1" />
        <img :src="designPng.standard.reality2" />
      </div>
    </div>
    <div class="content-item mt46">
      <p class="content-item-title">系统一致性</p>
      <p class="content-item-desc">同一用语、功能、操作保持一致。</p>
      <div class="content-item-img">
        <img :src="designPng.standard.same1" />
        <img :src="designPng.standard.same2" />
      </div>
    </div>
    <div class="content-item mt46">
      <p class="content-item-title">防止错误发生</p>
      <p class="content-item-desc">比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择。</p>
      <div class="content-item-img">
        <img :src="designPng.standard.error1" />
        <img :src="designPng.standard.error2" />
      </div>
    </div>
    <div class="content-item mt46">
      <p class="content-item-title">遵从习惯</p>
      <p class="content-item-desc">尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的。比如填完表单，下一步应该生成表单，而不是下一步就是完成。</p>
      <div class="content-item-img">
        <img :src="designPng.standard.habit1" />
        <img :src="designPng.standard.habit2" />
      </div>
    </div>
    <div class="content-item mt46">
      <p class="content-item-title">突出重点</p>
      <p class="content-item-desc">用户的浏览动作不是读，不是看，而是扫。设计中应该突出重点，弱化和剔除无关信息。重要对话中不应该包含无关紧要的信息。</p>
      <div class="content-item-img">
        <img :src="designPng.standard.keypoint1" />
        <img :src="designPng.standard.keypoint2" />
      </div>
    </div>
    <div class="content-item mt46">
      <p class="content-item-title">错误帮助</p>
      <p class="content-item-desc">错误信息应该用语言表达而不是比如404的代码。需要准确地反应问题所在并提出建设性的解决方案, 帮助用户从错误中恢复将损失降到最低, 提供详尽的说明文字和指导方向。</p>
      <div class="content-item-img">
        <img :src="designPng.standard.help1" />
        <img :src="designPng.standard.help2" />
      </div>
    </div>
    <div class="content-item mt46">
      <p class="content-item-title">人性化帮助</p>
      <div class="content-item-img">
        <img :src="designPng.standard.human1" />
        <img :src="designPng.standard.human2" />
      </div>
    </div>
  </div>
</template>

<style type="less" scoped>
  .standard {
    width: 988px;
    margin: auto;
    padding: 36px 0 120px;
  }

  .content-item {
    margin-top: 32px;

    > .content-item-title {
      font-size: 24px;
      color: #1D2129;
      line-height: 36px;
    }
    > .content-item-desc {
      margin-top: 12px;
      font-size: 14px;
      color: #4E5969;
      line-height: 26px;
    }
    > .content-item-img {
      display: flex;
      margin-top: 12px;
      > img {
        width: 380px;
        height: 212px;
        margin-right: 16px;
      }
    }
  }
</style>
